<template>
  <div class="container">
      <div class="head">
          <div class="img">
              <img src="../../assets/NJUST.jpeg" />
          </div>
          <div class="person">
              <img src="../../assets/用户名.png" />
              <li class="li1"><router-link to="/person"><span>个人主页</span></router-link></li>
          </div>
          <div class="list">
              <img src="../../assets/购物车.png" />
              <li class="li1"><router-link to="/sample"><span>我的清单</span></router-link></li>
          </div>
      </div>
      <div class="crumbs">
          <nav>
            <router-link to="/home1"><span>首页</span></router-link>
            <router-link to="/home1"><span>{{ '/'+staName}}</span></router-link>
              <!-- <a href="#">首页</a><span>/</span>
              <a href="#">XXXX标准</a><span>/</span>
              <a href="#">XXXXX项目</a><span>/</span>
              -->
              <a href="#">/样品</a>
          </nav>
          <!--<img src="@/assets/返回.png" alt="Back"  />-->
          
      </div>
      <div class="equipment-list">
          <el-table 
              :data="filteredData" 
              style="width: 60%; margin: 20px auto;"
              @tab-click="handleTabClick"
              :header-cell-style="tableHeaderStyle"
              :cell-style="tableCellStyle"
              border>
              <el-table-column 
                  prop="spId" 
                  label="序号" 
                  width="100"
                  align="center">
              </el-table-column>
              <el-table-column 
                  prop="spName" 
                  label="样品名称" 
                  align="center">
              </el-table-column>
              <el-table-column 
                  prop="spFactory" 
                  label="生产厂家" 
                  align="center">
              </el-table-column>
              <el-table-column 
                  label="操作" 
                  width="120"
                  align="center">
                  <template slot-scope="scope">
                      <el-button 
                          type="primary" 
                          size="small" 
                          @click="showDialog(scope.row)"
                          class="custom-button">
                          加入清单
                      </el-button>
                  </template>
              </el-table-column>
          </el-table>
          
          
          <el-dialog 
              :visible.sync="dialogVisible" 
              title="规格型号申请"
              width="30%"
              custom-class="custom-dialog">
              <el-form :model="form" label-width="80px">
                  <el-form-item label="规格型号">
                      <el-select 
                          v-model="form.modelNumber" 
                          placeholder="请选择"
                          class="custom-select">
                          <el-option
                              v-for="number in modelNumbers"
                              :key="number"
                              :label="number.toString()"
                              :value="number">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="申请需求">
                      <el-input 
                          v-model="form.demand" 
                          type="textarea"
                          :rows="4"
                          placeholder="请输入申请需求说明"
                          class="custom-input">
                      </el-input>
                  </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false" plain>取 消</el-button>
                  <el-button type="primary" @click="handleSubmit">确 定</el-button>
              </span>
          </el-dialog>

          <el-dialog
              :visible.sync="confirmDialogVisible"
              title="提示"
              width="30%"
              custom-class="confirm-dialog">
              <div class="confirm-content">
                  <i class="el-icon-success success-icon"></i>
                  <span>已成功加入清单！</span>
              </div>
              <span slot="footer" class="dialog-footer">
                  <el-button @click="confirmDialogVisible = false" plain>关 闭</el-button>
                  <el-button type="primary" @click="goToList">查看清单</el-button>
              </span>
          </el-dialog>

          <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="totalItems"
          class="pagination-centered">
          </el-pagination>
          <!-- <router-link to="/home1">
              <div class="back-button" >
                  <img src="@/assets/返回.png" alt="Back" class="back-icon" />
              </div>
          </router-link> -->
      </div>

      <div class="chatbot">
          <img src="../../assets/客服.png" />
          <span class="chatbot-text">未找到所需内容？</span>
          <a href="#" class="chatbot-link" @click="toggleChatbot">点我留言</a>
      </div>

      <!-- 遮罩层 -->
      <div v-if="dialogVisible" class="chatbot-mask"></div>

      <!-- 留言弹出框 -->
      <div v-if="isChatbotVisible" class="chatbot-popup">
          <h2>留言板</h2>
          <textarea v-model="message" rows="4" cols="50" placeholder="请输入您的留言..."></textarea>
          <div class="popup-actions">
              <el-button type="primary" @click="submitMessage">提交留言</el-button>
              <el-button @click="toggleChatbot">关闭</el-button>
          </div>
      </div>
  </div>
</template>

<script>
export default {
data() {
  return {
    staId:'',
    staName:'',
    str:'',
    dialogVisible: false, // 控制加入清单弹窗显示
    isChatbotVisible: false, // 控制留言弹出框显示
    form: {
      modelNumber: '', // 规格型号
      demand: ''    // 申请需求
    },
    selectedRow: null,
    modelNumbers: [],
    equipmentData: [
      // { index: '方案A(点击查看)', sampleName: '一次性使用防护口罩', manufacturer: '厂家A' },
      // { index: '方案A(点击查看)', sampleName: '一次性使用防护服', manufacturer: '厂家B' },
      // ...其他设备数据
    ],
    currentData: [],//初始化为第一个列表的传入数据
    pageSize: 2,//一页显示的数据数
    currentPage: 1,//当前页，初始化为第一页，点击则更新
    totalItems: 0,
    confirmDialogVisible: false, // 添加确认弹窗的显示控制
  };
},
created:function(){
  this.staId=this.$route.params.staId;
  this.staName=this.$route.params.staName;
  //console.log("这个是staId"+this.staId);
  this.$http.get("/sampleList", {
      params: {
        staId: this.staId
      }
    }).then((result) => {
      console.log(result.data);
      this.equipmentData = result.data;
      this.totalItems=this.equipmentData.length;
      this.currentData=this.equipmentData;
  
      // this.str=result.data.spGg
    });
    // console.log("这个是str"+this.str);
    // const parts = this.str.slice(1, -1).split('/');
    // console.log("这个是数字160 170 180####"+parts);
},
computed: {
    filteredData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.currentData.slice(start, end);
    },
  },
methods: {
 showDialog(row) {
    this.dialogVisible = !this.dialogVisible; // 显示弹窗
    // 这里可以添加其他逻辑，比如填充弹窗内容等
    this.selectedRow = row;
    this.modelNumbers=row.spGg.split('/');
  },
  handleSubmit() {
    const formData = {
      spId: this.selectedRow.spId,
      spoGg: this.form.modelNumber,
      spoNeed: this.form.demand,
    };
    
    this.$http.put('/AddSampleOrder', formData)
      .then(response => {
        this.dialogVisible = false; // 关闭规格型号弹窗
        this.confirmDialogVisible = true; // 显示确认弹窗
        this.form.modelNumber = '';
        this.form.demand = '';
      })
      .catch(error => {
        this.$message.error('添加失败，请重试');
      });
  },
  handlePageChange(newPage) {
   console.log('当前页码', newPage);
   // 在这里添加分页逻辑
  },
   //点击表格事件
   handleTabClick(tab, event) {
      this.activeTab = tab.name;//;
      this.currentData = this.equipmentData;
      this.totalItems=this.currentData.length;
      this.currentPage = 1; // 重置当前页为第一页
    },
 toggleChatbot() {
    this.isChatbotVisible = !this.isChatbotVisible; // 切换弹出框显示状态
 },
 submitMessage() {
      // 提交留言的逻辑
      console.log('留言内容:', this.message);
      // 可以在这里添加代码将留言发送到服务器
      this.$http.put(`/insertFeedback/${this.message}`).then((response)=>{
          
      }),
      this.isChatbotVisible = false; // 提交后隐藏弹出框
      this.message = ''; // 清空留言内容

      // 添加弹窗提示留言成功的逻辑
      this.$alert('留言成功！', '成功', {
        confirmButtonText: '确定',
        type: 'success'
      });
    },
    goToList() {
      this.confirmDialogVisible = false;
      this.$router.push('/sample'); // 跳转到清单页面
    },
    tableHeaderStyle() {
        return {
            backgroundColor: '#f5f7fa',
            color: '#606266',
            fontWeight: 'bold',
            fontSize: '14px',
            height: '50px',
            padding: '0',
            textAlign: 'center'
        }
    },
    
    tableCellStyle() {
        return {
            fontSize: '14px',
            padding: '12px 0',
            textAlign: 'center'
        }
    }
}
};
</script>

<style scoped>
.container {
  width: 100%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.head {
  width: 100%;
  background-color: #abe0f3;
  height: 6vh;
}

  .head .img {
    height: 100%;
    float: left;
  }

    .head .img img {
      height: 100%;
    }

  .head .list {
    float: right;
    height: 45%;
  }

    .head .list img {
      margin-top: 15px;
      margin-right: 7px;
      height: 100%;
      float: left;
    }

    .head .list li {
      margin-top: 20px;
      margin-right: 40px;
      display: block;
      float: left;
      font-size: 18px;
    }

  .head .person {
    float: right;
    height: 42%;
  }

    .head .person img {
      margin-top: 15px;
      margin-right: 7px;
      height: 100%;
      float: left;
    }

    .head .person li {
      margin-top: 20px;
      margin-right: 70px;
      display: block;
      float: left;
      font-size: 18px;
    }


.nav a {
  margin-left: 10px;
  text-decoration: none;
  color: #000;
}

  .nav a.active {
    background-color: #555;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
  }

.crumbs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
}
.back-button {
  float: right;
  margin-top: 70px;
  margin-right: -100px;
}

  .back-button img {
    height: 60px;
    cursor: pointer; /* 当鼠标悬停时显示为手型 */
  }
.equipment-list {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin: 20px auto;
}
.header {
padding: 15px 25px;
background-color: #fff;
color: #333;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #eaeaea;
text-align: left; /* 左对齐 */
}
.pagination-centered {
text-align: center;
margin-top: 30px;
}
.chatbot {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color:#f9f9f9 ;/* */
  padding: 10px;
  border-radius: 5px;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.chatbot img{
  width: 70px;
}
.chatbot-text {
  margin-right: 10px; /* 与链接间距 */
}
.chatbot-link {
  color: black; /* 设置链接颜色为黑色 */
  text-decoration: underline; /* 添加下划线 */
  font-size: 16px; /* 设置字体大小 */
  transition: color 0.3s; /* 平滑颜色变化 */
}

.chatbot-link:hover,
.chatbot-link:focus,
.chatbot-link:active {
  color: black; /* 悬停、聚焦、点击时颜色不变 */
  text-decoration: underline; /* 保持下划线 */
}
.chatbot-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 灰色半透明遮罩 */
  z-index: 999; /* 遮罩层在弹出框下一层 */
}
.chatbot-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  z-index: 1000; /* 确保弹出框在最上层 */
}
.popup-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.chatbot-popup h2 {
  margin-top: 0; /* 移标题的上边距 */
}

.chatbot-popup textarea {
  width: 100%;
  margin-bottom: 10px;
}

.dialog-footer {
 text-align: right;
}

.custom-button {
    padding: 8px 15px;
    font-size: 13px;
    border-radius: 4px;
    transition: all 0.3s;
}

.custom-button:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

/* 修改表格hover效果 */
::v-deep .el-table tbody tr:hover > td {
    background-color: #f5f7fa !important;
}

/* 修改表格边框颜色 */
::v-deep .el-table--border {
    border: 1px solid #ebeef5;
}

/* 修改表格内边框颜色 */
::v-deep .el-table td, 
::v-deep .el-table th {
    border-color: #ebeef5;
}

/* 分页器样式���化 */
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #409EFF;
    color: #fff;
}

::v-deep .el-pagination.is-background .el-pager li {
    margin: 0 3px;
    border-radius: 4px;
}

/* 自定义弹窗样式 */
::v-deep .custom-dialog {
    border-radius: 8px;
}

::v-deep .custom-dialog .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
}

::v-deep .custom-dialog .el-dialog__title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

::v-deep .custom-dialog .el-dialog__body {
    padding: 30px 20px;
}

::v-deep .custom-dialog .el-dialog__footer {
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
}

/* 确认弹窗样式 */
::v-deep .confirm-dialog {
    border-radius: 8px;
}

.confirm-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.success-icon {
    font-size: 24px;
    color: #67C23A;
    margin-right: 10px;
}

/* 表单元素样式 */
::v-deep .custom-select {
    width: 100%;
}

::v-deep .custom-input .el-textarea__inner {
    padding: 8px 12px;
    font-size: 14px;
}

::v-deep .el-form-item__label {
    font-weight: 500;
    color: #606266;
}

/* 按钮样式 */
::v-deep .dialog-footer .el-button {
    padding: 9px 20px;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.3s;
}

::v-deep .dialog-footer .el-button:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

::v-deep .dialog-footer .el-button + .el-button {
    margin-left: 12px;
}

</style>